{% macro list(blogList,isCanReply) %} {% for item in blogList %}
<div class="blog-item">
    <div class="user-info">
        <img src="{{item.user.avatar}}" alt="" class="user-avatar" width="60" height="60" style="border-radius:50%;">
    </div>
    <div class="blog-info">
        <div class="blog-content">
            <div>
                <a href="/profile/{{item.user.userName}}">
                    <span class="username">{{item.user.nickName}}</span>
                </a>
                <span class="text">{{item.formatContent | safe}}</span>
            </div>

            {% if item.images %}
            <a href="{{item.images}}" target="_blank">
                <img src="{{item.images}}" alt="" width="150" class="blog-images">
            </a>
            {% endif %}
        </div>
        <div class="create-time">
            <span>{{item.createdAtFormat}}</span>
            <!-- 添加回复功能 -->
            {% if isCanReply %}
            <a href="#" class="reply" data-nick-name="{{item.user.nickName}}" data-user-name="{{item.user.userName}}" data-content="{{item.content}}">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-reply-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M9.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L9.079 4.1A.716.716 0 0 0 8 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z" />
        </svg>回复
            </a>
            {% endif %}
        </div>
    </div>
</div>
<hr> {% endfor %}
<script>
    // 回复功能
    // on(event,selector,fn)事件委托
    $(".col-lg-8").on("click", ".reply", (function(e) {
        // 阻止默认行为
        e.preventDefault();
        const nickName = $(this).attr('data-nick-name');
        const userName = $(this).attr('data-user-name');
        const content = $(this).attr('data-content');
        //   //@张三-zahngsan xxxxx
        const $replyStr = `// @${nickName} - ${userName} ${content}`;
        $("#blog-content").val($replyStr);
        // 获取焦点
        // 获取$("#blog-content")[0] 原生dom对象
        $("#blog-content")[0].focus();
        $("#blog-content")[0].setSelectionRange(0, 0);
    }));
</script>
{% endmacro %} {% block js %} {% endblock %}